<template>
    <div>
        <el-row>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span><strong style="color:green;">新增目标信息</strong></span>
                </div>                
                <div>
                    <template>
                        <el-form  ref="form" :model="form" :rules="rules" label-width="125px">
                            <el-row style="border-radius: 4px;">
                                <el-col :span="12">      
                                    <el-form-item label="主机:端口" prop="target">                                       
                                        <span slot="label">
                                            <el-tooltip content="目标地址(ip 或主机名)和端口,列: 127.0.0.1:8000" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            主机:端口
                                        </span>

                                        <el-input placeholder="目标地址（ip 或主机名）和端口" v-model="form.target"></el-input>
                                    </el-form-item>
                                </el-col>

                                <el-col :span="12">
                                    <el-form-item label="权重" prop="weight">                                        
                                        <span slot="label">
                                            <el-tooltip content="此目标在上游负载均衡器( 0- 1000)中获得的权重。如果主机名解析为SRV记录，则该weight值将被 DNS 记录中的值覆盖。默认为100" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            权重
                                        </span>
                                        <el-input placeholder="此目标在上游负载均衡器中的权重" v-model="form.weight"></el-input>
                                    </el-form-item>
                                </el-col>
                            </el-row>

                            <el-row>
                                <el-col :span="24">
                                    <el-form-item label="标签:" prop="tags">
                                        <el-tag :key="tag" v-for="tag in form.tags" closable 
                                        :disable-transitions="false" 
                                        @close="handleTagClose(tag)">
                                            {{tag}}
                                        </el-tag>
                                        
                                        <span slot="label">
                                            <el-tooltip content="与目标关联的一组可选字符串，用于分组和过滤。" placement="right-end">
                                            <i class="el-icon-question"></i>
                                            </el-tooltip>
                                            标签:
                                        </span>

                                        <el-input v-model="inputTag" placeholder="与目标相关联的一组可选字符串，用于分组和过滤。按enter键 确认"
                                        @keyup.enter.native="handleInputTagConfirm"
                                        @blur="handleInputTagConfirm"
                                        ></el-input>
                                    </el-form-item>                    
                                </el-col>
                            </el-row>
                        </el-form>
                        
                        <el-row type="flex" justify="end">
                            <el-col :span="12">
                                <el-button type="primary" @click="submitForm">添 加</el-button>
                                <el-button @click="cancel">取 消</el-button>
                            </el-col>
                        </el-row>   

                    </template>
                </div>
            </el-card>
        </el-row>
        <el-row>
            <el-card class="box-card">
                <div slot="header" class="clearfix">
                    <span><strong style="color:green;">目标信息列表</strong></span>
                </div>
                <template>          

                    <el-table v-loading="loading" 
                    :data="targets.slice((queryParams.pageNum-1)*queryParams.pageSize,queryParams.pageNum*queryParams.pageSize)">
                        <el-table-column label="目标信息" align="center" prop="target"></el-table-column>
                        <el-table-column label="权重" align="center" prop="weight"></el-table-column>
                        <el-table-column label="id" align="center" prop="id"></el-table-column>
                        <el-table-column label="创建时间" align="center" prop="created_at"  :formatter="dateFormat"></el-table-column>
                        <el-table-column  label="操作" align="center" class-name="small-padding fixed-width">
                            <template slot-scope="scope">                    
                                <el-button
                                    size="mini"
                                    type="text"
                                    icon="el-icon-edit"
                                    @click="handleDelete(scope.row)"
                                    v-hasPermi="['kong:target:delete']"
                                >删除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>

                     <pagination
                        v-show="total>0"
                        :total="total"
                        small
                        @current-change="handleCurrentChange"
                        :current-page="queryParams.pageNum" 
                        :page-sizes="[3]" 
                        :page-size="queryParams.pageSize" 
                        layout="total, sizes, prev, pager, next, jumper"
                        />

                </template>
            </el-card>
        </el-row>
    </div>
</template>
<script>
import moment from 'moment'
import {getTargetByUpstreamId,addTargetToUpstreamId,deleteTargetFromUpstreamId} from '@/api/kong/upstream.js'
export default {
    props:{
        upstreamId:{
            type: String,
            required: false,
        }
    },
    data(){
        return{
            targets:[],
            loading: false,
            form:{
                target:null,
                weight: 100,
                tags:[],
            },
            rules:{
                target:[
                    { required: true, message: '目标地址(ip或主机名):端口', trigger: 'blur' },    
                ],
                weight:[
                    { required: true, message: '权重信息必填，0-1000', trigger: 'blur' },  
                ]
            },    
            inputTag:"",
            showSearch: false,
            queryParams:{
                pageNum: 1,
                pageSize: 3,
            },
            // 总条数
            total: 0,
        }
    },
    created(){
        console.log("upstream target :"+this.upstreamId);
        this.getTargets();
    },
    methods:{
        getTargets(){
            getTargetByUpstreamId(this.upstreamId).then(res=>{
                // console.log("target:"+JSON.stringify(res));
                this.targets=res.rows
                this.total=res.total
            })
        },
        handleDelete(row){
            deleteTargetFromUpstreamId(this.upstreamId,row.id).then(res =>{
                console.log(JSON.stringify(res))
                this.getTargets();
                this.msgSuccess('删除成功')
            })
        },
        //时间处理函数
        dateFormat(row, column){
            const _date = row[column.property]*1000; 
            if(_date ==undefined){return ''};
            return moment(_date).format("YYYY-MM-DD HH:mm:ss");
        },
        dateFormatLong(_date){
            if(_date ==undefined){return ''};
            return moment(_date*1000).format("YYYY-MM-DD HH:mm:ss");
        },
        // 标签关闭事件
        handleTagClose(tag){
            this.form.tags.splice(this.form.tags.indexOf(tag),1);
        },

        // 标签输入确认事件
        handleInputTagConfirm(){
            let inputValue=this.inputTag;
            if(inputValue){
                if(this.form.tags.indexOf(inputValue)>-1){
                    this.inputTag="";
                    return;
                }
                this.form.tags.push(inputValue);
            }
            this.inputTag="";
        },
        submitForm(){
            
            this.$refs['form'].validate(valid => {
                if (!valid) return;
                // console.log(this.form);
                addTargetToUpstreamId(this.upstreamId,this.form).then(res=>{
                    // console.log(JSON.stringify(res))
                    this.reset();
                    this.getTargets();
                })
            })
        },
        cancel(){},
        reset(){            
            this.form = {
                target:null,
                weight: 100,
                tags:[],
            };
            this.resetForm("form");
        },
        handleSizeChange(val){
            console.log('handleSizeChange:'+val)
            this.queryParams.pageNum=val;
            this.queryParams.pageSize=val;
        },
        handleCurrentChange(val){
            console.log('handleCurrentChange:'+val)
            this.queryParams.pageNum= val;
        },
    }
}
</script>
<style scoped>

</style>